<template>
  <view class="webview-container">
    <!-- 顶部区域 -->
    <view class="header">
      <view class="title-row">
        <text class="title">{{ pageTitle }}</text>
      </view>
      <view class="back-button" @tap="goBack">
        <text class="back-text">返回</text>
      </view>
    </view>
    
    <!-- WebView内容区域 -->
    <view class="webview-content">
      <!-- #ifdef MP-WEIXIN -->
      <web-view :src="url" @message="handleMessage"></web-view>
      <!-- #endif -->
      
      <!-- #ifdef H5 -->
      <iframe :src="url" class="h5-iframe"></iframe>
      <!-- #endif -->
      
      <!-- #ifdef APP-PLUS -->
      <web-view :src="url" @message="handleMessage"></web-view>
      <!-- #endif -->
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      url: '',
      pageTitle: '外部链接'
    }
  },
  
  onLoad(options) {
    if (options.url) {
      try {
        this.url = decodeURIComponent(options.url);
      } catch (error) {
        console.error('URL解码失败:', error);
        this.url = options.url; // 使用原始URL作为备选
      }
    }
    if (options.title) {
      try {
        this.pageTitle = decodeURIComponent(options.title);
      } catch (error) {
        console.error('标题解码失败:', error);
        this.pageTitle = options.title || '外部链接'; // 使用原始标题或默认标题作为备选
      }
    }
    
    // 设置页面标题
    uni.setNavigationBarTitle({
      title: this.pageTitle
    });
  },
  
  methods: {
    goBack() {
      uni.navigateBack({
        delta: 1
      });
    },
    
    handleMessage(event) {
      // console.log('WebView消息:', event);
      // 处理来自WebView的消息
    }
  }
}
</script>

<style>
.webview-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #fff;
}

/* 顶部区域样式 */
.header {
  display: flex;
  flex-direction: column;
  background-color: #1e3c72;
  color: #fff;
  position: relative;
  padding-top: calc(20rpx + 44px);
}

.title-row {
  display: flex;
  justify-content: center;
  padding: 20rpx 0;
}

.title {
  color: #fff;
  font-size: 36rpx;
  font-weight: bold;
  text-align: center;
}

.back-button {
  position: absolute;
  top: calc(20rpx + 44px);
  left: 30rpx;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 30rpx;
  padding: 10rpx 20rpx;
}

.back-text {
  font-size: 28rpx;
  color: #fff;
}

/* WebView内容区域 */
.webview-content {
  flex: 1;
  width: 100%;
}

/* H5环境下的iframe样式 */
.h5-iframe {
  width: 100%;
  height: 100%;
  border: none;
}
</style>